<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
    <!-- 过滤器的两种使用用法，
        过滤器用特定格式化后再显示，
        如电商网站的金额1999=》1,999
        可接受额外参数，多个过滤器可以串联
        1.使用插值语法
        2.bind绑定语法 -->
    <div id="root">
        <!-- 计算属性实现 -->
        <h2>显示格式化后的时间</h2>
        <h3>现在是{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeformater}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeformater('YYYY_MM_DD') | myslice}}</h3>
        <h3 :x="msg">绑定内容</h3>
        <input type="text" v-model="msg">
    </div>

    <div id="root2">
        <!-- 全局过滤器 -->
        <h2>{{msg | myslice}}</h2>
    </div>
</body>
    <script type="text/javascript">
       Vue.config.productionTip = false
       //注册全局过滤器
       Vue.filter('myslice',function(value){
            return value.slice(0,5)
       })

       new Vue({
         el:'#root', 
         data:{
               time:'1638017874433',  //时间戳
               msg:'你好，msg绑定 '
         },
         computed:{
             fmtTime(){
                 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
             }
         },methods: {
             getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
             }
         },
         filters:{
             //局部过滤器
            timeformater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log("@",value)
                return dayjs(value).format(str)
            },
            myslice(value){
                // cons ole.log("@",value)
                return value.slice(0,4)
            }
         }
       })

       //再配置一个做测试
       new Vue({
         el:'#root2',
         data:{
            msg:'hello,蒋涛'
         },
       })
    </script>
</html>